<template>
    <Transition name="fade">
        <div @click="event" v-if="visible" class='tost'>{{props.value}}</div>
    </Transition>
</template>

<script setup lang="ts">
const props = defineProps({
	value:{
		type:String,
		default:'空'
	},
	unMount:{
		type:Function,
		required:true
	},
    animationTime:{
        type:Number,
        default:0.2
    }
})
const visible:Ref<boolean> = ref(false)
const event = ()=>{
	visible.value = false
}
onMounted(()=>{
	visible.value = true
    setTimeout(()=>{
        visible.value = false
        close()
    },1000)
})
const close = ()=>{
    setTimeout(()=>{
        props.unMount()
    },props.animationTime)
}

</script>
<style lang="scss" scoped>
.tost{
    z-index: 1001;
    position: fixed;
    top: 50%;
    left: calc(50%);
    transform: translateX(-50%) translateY(-50%) scale(1) rotate(90deg);
    background-color: rgb(255, 178, 76);
    background-color: #0404049d;
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 10px;
}
/* 进入动画 */
.fade-enter-active {
    animation: move v-bind("props.animationTime + 's'");
}

/* 离开动画 */
.fade-leave-active {
    animation: move v-bind("props.animationTime + 's'") reverse;
}

@keyframes move {
    0%{
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0.9) rotate(90deg);
    }
    80%{
        transform: translateX(-50%) translateY(-50%) scale(1.05) rotate(90deg);
    }
    100%{
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1) rotate(90deg);
    }
}
</style>